<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>采购申请列表</title>
    <script src="/vue/vue.js"></script>
    <script src="/axios/axios.min.js"></script>
    <script src="/qs/qs.min.js"></script>
    <script src="/elementui/index.js"></script>
    <link rel="stylesheet" href="/elementui/index.css">
    <style>
        .el-form-item{
            margin-bottom: 0;
        }
        .label_name{
            width: 100px;
            text-align: right;
            float: left;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container style="height: 565px; border: 1px solid #eee">
            <el-main>
                <el-row>
                    <label>产品名称</label>
                    <el-input v-model="param" placeholder="请输入搜索内容" clearable style="width: 20%;"></el-input>
                    <el-button icon="el-icon-search" type="primary" circle @click="searchParam"></el-button>
                </el-row>
                <el-divider></el-divider>
                <el-table
                        ref="orderTable"
                        :data="tableData"
                        height="400"
                        border
                        stripe
                        tooltip-effect="dark"
                        style="width: 100%"
                        v-loading="loading"
                        :header-cell-style="{background:'#DCDFE6',color:'#606266'}">
                    <el-table-column
                            prop="orderId"
                            label="采购订单编号"
                            sortable
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="applicationType"
                            label="申请类型"
                            sortable
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="companyName"
                            label="供应商名称"
                            sortable
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="productName"
                            label="产品名称"
                            sortable
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="productNumber"
                            label="产品编号"
                            sortable
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="productColor"
                            label="产品颜色"
                            sortable
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="demandQuantity"
                            label="需求数量"
                            sortable
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="estimatedCost"
                            label="预计花费"
                            sortable
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="deptName"
                            label="需求部门"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="paymentMethod"
                            label="付款方式"
                            sortable
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="transactionTime"
                            label="交易时间"
                            sortable
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="transactionNumber"
                            label="交易号"
                            sortable
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="approver"
                            label="审核人"
                            sortable
                            width="200">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            prop="applicationStatus"
                            label="状态"
                            width="200">
                        <template slot-scope="scope">
                            <span
                                    v-if="scope.row.applicationStatus == 4"
                                    style="background-color: #5daf34;color: gainsboro">
                                已下单
                            </span>
                            <span
                                    v-if="scope.row.applicationStatus == 5"
                                    style="background-color: red;color: gainsboro">
                                未下单
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="250">
                        <template slot-scope="scope">
                            <el-button
                                    v-if="scope.row.applicationStatus == 4"
                                    icon="el-icon-menu"
                                    size="normal"
                                    type="success"
                                    :loading="loading"
                                    @click="showShipping(scope.$index, scope.row)">查看物流</el-button>
                            <el-button
                                    v-if="scope.row.applicationStatus == 5"
                                    icon="el-icon-mobile"
                                    size="normal"
                                    type="primary"
                                    :loading="loading"
                                    @click="order(scope.$index, scope.row)">去下单</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        @prev-click="prev"
                        @next-click="next"
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        :current-page="current"
                        :page-sizes="[5, 10, 20, 50]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-main>
            <el-dialog :visible.sync="dialogVisible" title="采购订单物流明细" width="60%">
                <p>采购订单编号：<span style="color: red;font-size: large">{{shipping.orderId}}</span></p>
                <el-divider></el-divider>
                <el-main style="border: 1px solid #eee">
                    <el-row :gutter="20">
                        <el-col :span="12"><div class="grid-content bg-purple">
                            <div style="padding-top: 15px;">
                                <label class="label_name">收货地址：</label>{{shipping.endPlace}}
                            </div>
                        </div></el-col>
                        <el-col :span="12"><div class="grid-content bg-purple">
                            <div style="padding-top: 15px;">
                                <label class="label_name">买家公司：</label>{{shipping.buyer}}
                            </div>
                        </div></el-col>
                        <el-col :span="12"><div class="grid-content bg-purple">
                            <div style="padding-top: 15px;">
                                <label class="label_name">物品名称：</label>{{shipping.productName}}
                            </div>
                        </div></el-col>
                        <el-col :span="12"><div class="grid-content bg-purple">
                            <div style="padding-top: 15px;">
                                <label class="label_name">产品编号：</label>{{shipping.productNumber}}
                            </div>
                        </div></el-col>
                        <el-col :span="12"><div class="grid-content bg-purple">
                            <div style="padding-top: 15px;">
                                <label class="label_name">采购数量：</label>{{shipping.demandQuantity}}
                            </div>
                        </div></el-col>
                        <el-col :span="12"><div class="grid-content bg-purple">
                            <div style="padding-top: 15px;">
                                <label class="label_name">卖家名称：</label>{{shipping.seller}}
                            </div>
                        </div></el-col>
                        <el-col :span="12"><div class="grid-content bg-purple">
                            <div style="padding-top: 15px;">
                                <label class="label_name">支付方式：</label>{{shipping.paymentMethod}}
                            </div>
                        </div></el-col>
                        <el-col :span="12"><div class="grid-content bg-purple">
                            <div style="padding-top: 15px;">
                                <label class="label_name">创建时间：</label>{{shipping.applicationTime}}
                            </div>
                        </div></el-col>
                        <el-col :span="12"><div class="grid-content bg-purple">
                            <div style="padding-top: 15px;">
                                <label class="label_name">成交时间：</label>{{shipping.transactionTime}}
                            </div>
                        </div></el-col>
                        <el-col :span="12"><div class="grid-content bg-purple">
                            <div style="padding-top: 15px;width: 350px;">
                                <label class="label_name">交易号：</label>{{shipping.transactionNumber}}
                            </div>
                        </div></el-col>
                        <el-col :span="12"><div class="grid-content bg-purple">
                            <div style="padding-top: 15px;width: 350px;">
                                <label class="label_name">总价（/元）：</label>{{shipping.estimatedCost}}
                            </div>
                        </div></el-col>
                        <el-col :span="12"><div class="grid-content bg-purple">
                            <div style="padding-top: 15px;width: 350px;">
                                <label class="label_name">发货地址：</label>{{shipping.startPlace}}
                            </div>
                        </div></el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <p>物流信息</p>
                    <el-main style="border: 1px solid #eee">
                    </el-main>
                </el-main>
                <div slot="footer" class="dialog-footer">
                    <span v-if="shipping.pstatus == 1">已签收</span>
                    <el-button @click="dialogVisible = false">返回</el-button>
                    <el-button
                            v-if="shipping.pstatus == -1"
                            type="primary"
                            @click="sign(shipping.orderId,shipping.productNumber)">
                        确定签收
                    </el-button>
                </div>
            </el-dialog>
        </el-container>
    </div>
</body>
<script>
    var Main = {
        data() {
            return {
                loading: true,
                tableData: [],  //表格数据
                current:1,  //当前行
                total:1,    //总行数
                pageSize:10,    //页码
                pages:1,    //总页数
                param:'',   //搜索
                formInline: {
                    user: '',
                    region: ''
                },
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                dialogVisible: false,
                shipping:{
                    orderId:'',
                    startPlace:'',
                    endPlace:'',
                    buyer:'',
                    seller:'',
                    productName:'',
                    productNumber:'',
                    demandQuantity:'',
                    paymentMethod:'',
                    applicationTime:'',
                    transactionTime:'',
                    transactionNumber:'',
                    estimatedCost:'',
                    pstatus:'',
                },
            }
        },
        methods: {
            //分页上一页
            prev(current){
                this.getPage(current);
            },
            //分页下一页
            next(current){
                this.getPage(current);
            },
            //分页当前页点击
            currentChange(current){
                this.getPage(current);
            },
            //分页当前页点击
            currentChange(current){
                this.getPage(current,this.pageSize,this.param);
            },
            sizeChange(pageSize) {
                this.getPage(1,pageSize,this.param);
            },
            //加载数据
            getPage(current,pageSize,param){
                let params = new URLSearchParams();
                params.append("current",current);
                params.append("pageSize",pageSize);
                params.append("param",param);
                axios.get("/purchasing/purchase_orders",{params:params}).then(value => {
                    if (value.data.state==1){
                        this.loading = false;
                        this.tableData = value.data.data.records;
                        this.current = value.data.data.current;
                        this.total = value.data.data.total;
                        this.pageSize = value.data.data.size;
                        this.pages = value.data.data.pages;
                    }else {
                        this.sendMessage("出错啦","error");
                    }
                });
            },
            //搜索
            searchParam(){
                this.loading = true;
                this.getPage(1,this.pageSize,this.param);
                this.param = '';
            },
            //去下单
            order(index,row){
                if (confirm("确定吗？")){
                    axios.post("/purchasing/purchase_to_order",row).then(value => {
                        if (value.data.state==1){
                            this.loading = false;
                            this.sendMessage("下单成功","success");
                            this.loading = true;
                            this.getPage(1,this.pageSize,this.param);
                        }else {
                            this.sendMessage("出错啦","error");
                        }
                    })
                }else {
                    this.sendMessage("取消下单","error");
                }
            },
            //查看物流
            showShipping(index,row){
                this.loading = true;
                let param = new URLSearchParams();
                param.append("companyId",row.companyId);
                param.append("transactionNumber",row.transactionNumber);
                axios.get("/purchasing/shipping",{params:param}).then(value => {
                    if (value.data.state==1){
                        this.loading = false;
                        let data = value.data.data;
                        if (data==null){
                            this.sendMessage("暂无物流信息","warning");
                        }else {
                            this.dialogVisible = true;
                            this.shipping.orderId = data.orderId;
                            this.shipping.startPlace = data.startPlace;
                            this.shipping.endPlace = data.endPlace;
                            this.shipping.buyer = data.buyer;
                            this.shipping.seller = data.seller;
                            this.shipping.productName = data.productName;
                            this.shipping.productNumber = data.productNumber;
                            this.shipping.demandQuantity = data.demandQuantity;
                            this.shipping.estimatedCost = data.estimatedCost;
                            this.shipping.paymentMethod = data.paymentMethod;
                            this.shipping.applicationTime = data.applicationTime;
                            this.shipping.transactionTime = data.transactionTime;
                            this.shipping.transactionNumber = data.transactionNumber;
                            this.shipping.pstatus = data.pstatus;
                        }
                    }else {
                        this.sendMessage("出错啦","error");
                    }
                });
            },
            //签收
            sign(orderId,productNumber){
                if (confirm("确定签收吗？")){
                    let param = new URLSearchParams();
                    param.append("orderId",orderId);
                    param.append("productNumber",productNumber);
                    axios.post("/purchasing/sign",param).then(value => {
                        if (value.data.state == 1){
                            if (value.data.data == true){
                                this.sendMessage("签收成功","success");
                                this.dialogVisible = false;
                            }
                        }else {
                            this.sendMessage("出错啦","error");
                        }
                    });
                }
            },
            //提示信息
            sendMessage(msg,type){
                this.$message({
                    showClose: true,
                    message: msg,
                    type: type
                });
            }
        },
        mounted(){
            //加载数据
            this.getPage(1,this.pageSize,this.param);
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</html>